import { createApp } from "vue"
import { createRouter, createWebHistory } from "vue-router"
import ElementPlus from "element-plus"
import "element-plus/dist/index.css"
import App from "./app.vue"
import "./mock/index.js"
import "./styles/index.less"

// Import pages
import Home from "./pages/home.vue"
import BlogDetail from "./pages/blog-detail.vue"
import Login from "./pages/login.vue"
import Dashboard from "./pages/dashboard.vue"
import CreatePost from "./pages/create-post.vue"
import EditPost from "./pages/edit-post.vue"

// Router configuration
const routes = [
  { path: "/", component: Home },
  { path: "/blog/:id", component: BlogDetail },
  { path: "/login", component: Login },
  { path: "/dashboard", component: Dashboard, meta: { requiresAuth: true } },
  { path: "/create-post", component: CreatePost, meta: { requiresAuth: true } },
  { path: "/edit-post/:id", component: EditPost, meta: { requiresAuth: true } },
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

// Navigation guards
router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem("token")

  if (to.matched.some((record) => record.meta.requiresAuth) && !isAuthenticated) {
    next("/login")
  } else {
    next()
  }
})

// Create app
const app = createApp(App)

app.use(router)
app.use(ElementPlus)
app.mount("#app")

